<template>
  <el-row class="top">
    <el-col :span="3" class="logo-title css224a505aeb22325">
      <span @click="$router.replace('/')">小朋友音乐</span>
    </el-col>
    <el-col :span="16" class="control">
      <i class="el-icon-arrow-left" @click="$router.go(-1)"></i>
      <i class="el-icon-arrow-right" @click="$router.go(1)"></i>
    </el-col>
    <el-col :span="5" class="search">
      <i class="el-icon-search"></i>
      <input type="text" placeholder="搜索音乐" v-model.trim="inputValue " @keyup.enter="toResult" />
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: "top",
  data() {
    return {
      // 用户搜索内容
      inputValue: "",
    };
  },
  methods: {
    toResult() {
      if (this.inputValue == "") {
        // 内容为空时提示用户 -- element-ui警告框
        this.$message.warning("未输入内容");
      } else {
        // 去搜索页 -- 并携带数据
        this.$router.push(`/result?key=${this.inputValue}`);
      }
      this.inputValue = "";
    },
  },
};
</script>

<style lang="scss">
</style>